<template>
  <div class="animated-number" :class="{ highlight: isHighlighted }">
    <span class="value">{{ displayValue }}</span>
    <span v-if="suffix" class="unit">{{ suffix }}</span>
    <span v-if="trend" class="trend-arrow" :class="trend">
      {{ trend === 'up' ? '↑' : '↓' }}
    </span>
  </div>
</template>

<script lang="ts">
import { T_srv, Tsrv, ifs, vue } from './config';

@T_srv.comp
export default class AnimatedNumber extends vue {
  @T_srv.prop({ required: true }) value!: number;

  @T_srv.prop() suffix?: string;

  @T_srv.prop() trend?: 'up' | 'down';

  public displayValue = 0;

  private isHighlighted = false;

  get formattedValue() {
    return this.displayValue;
  }

  @T_srv.watch('value')
  onValueChange(newVal: number) {
    // 高亮动画
    this.isHighlighted = true;
    this.displayValue = newVal;

    // 关闭动画
    setTimeout(() => {
      this.isHighlighted = false;
    }, 2000);

    // 数值动画
    // gsap.to(this, {
    //   duration: 0.5,
    //   displayValue: newVal,
    //   onUpdate: () => {
    //     this.displayValue = Number(this.displayValue.toFixed(2));
    //   },
    //   onComplete: () => {
    //     // 高亮结束后延迟移除类名
    //     gsap.delayedCall(0.2, () => {
    //       this.isHighlighted = false;
    //     });
    //   }
    // });
  }

  created() {
    this.displayValue = this.value;
  }
}
</script>

<style lang="scss" scoped>
.animated-number {
  display: inline-flex;
  align-items: baseline;
  padding: 2px 8px;
  border-radius: 4px;
  transition: all 0.3s ease;
  .value {
    font-family: 'Roboto Mono', monospace;
    font-size: 24px;
    color: #fff;
    transition: inherit;
  }
  .unit {
    font-size: 16px;
    color: #cba8a8;
    margin-left: 4px;
    transition: inherit;
  }

  .trend-arrow {
    font-size: 16px;
    margin-left: 6px;
    transition: inherit;
  }

  .trend-arrow.up {
    color: #4caf50;
  }

  .trend-arrow.down {
    color: #ff5252;
  }
}
/* 高亮动画 */
.highlight {
  background: rgba(100, 200, 255, 0.3);
  animation: highlight-glow 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes highlight-glow {
  0% {
    box-shadow: 0 0 8px rgba(33, 150, 243, 0);
    background-color: rgba(100, 200, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 12px rgba(33, 150, 243, 0.3);
    background-color: rgba(100, 200, 255, 0.2);
  }
  100% {
    box-shadow: 0 0 8px rgba(33, 150, 243, 0);
    background-color: transparent;
  }
}
</style>
